<script>
export default {
    data() {return {
        tableData: [
            {id: 1, name: '魅族', price: 3699},
            {id: 2, name: '荣耀', price: 1399},
            {id: 3, name: '红米', price: 849},
            {id: 4, name: 'IPhone15', price: 8999},
            {id: 5, name: '红米K70', price: 2699},
        ]
    }},
    methods: {
        cli(row, column, event) {
            console.log(row)
            // TODO 页面跳转
            // this.$router.push("/goodsInfo/goods/" + row.id)
            this.$router.push({
                path: `/goodsInfo/goods/${row.id}`
            })
            // /goodsInfo/goods/id
            // this.$router.push({
            //     name: 'goods', // 通过name匹配的url
            //     params: {
            //         id: row.id
            //     }
            // })

            // 当提供了 path 属性 params 会被忽略
            // /goodsInfo/goods?id=1
            this.$router.push({
                path: '/goodsInfo/goods', // 通过name匹配的url
                query: {
                    id: row.id
                }
            })


        }
    },
}
</script>

<template>
<h2>商品详情</h2>
    <el-table :data="tableData" @row-click="cli">
        <el-table-column label="编号" prop="id" />
        <el-table-column label="商品名称" prop="name" />
        <el-table-column label="商品价格" prop="price" />
    </el-table>
    <router-view />
</template>

<style scoped>

</style>